<template>
  <div class="album">
    <div class="album_li" v-for="(item, index) in list" :key="item.id">
      <div class="album_li_left">
        <div class="sort">{{ index + 1 }}</div>
        <div class="img" :class="listType === '2' ? '' : 'img48'">
          <img :src="item.coverUrl || item.cover || item.picUrl" alt="" />
        </div>
      </div>
      <div
        class="album_li_right"
        :class="listType === '2' ? '' : 'album_li_right247'"
      >
        <div class="p_content">
          <div class="p1" :class="listType === '3' ? 'p1_230': ''">{{ item.albumName || item.name }}</div>
          <div class="p2" v-if="listType === '2'">{{ item.artistName }}</div>
        </div>
        <div class="more">
          <van-icon name="ellipsis" />
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import {Icon as vanIcon} from 'vant'
const props = defineProps({
  listType: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: () => [],
  },
});
</script>
<style lang="less" scoped>
.album {
  width: 100%;
  padding-top: 16px;
  &_li {
    margin-top: 14px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 24px;
    box-sizing: border-box;
    .img {
      width: 32px;
      height: 32px;
      border-radius: 3px;
      img {
        width: 100%;
      }
    }
    .img48 {
      width: 48px;
      height: 48px;
    }
  }
  .album_li_left {
    display: flex;
    align-items: center;
    .sort {
      margin-right: 20px;
    }
  }
  .album_li_right {
    width: 267px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
    box-sizing: border-box;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    .p1 {
      font-size: 16px;
      font-family: AppleSystemUIFont;
      color: #eeeeee;
      width: 230px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .p1_230{
      width: 200px;
    }
    .p2 {
      margin-top: 8px;
      font-size: 12px;
      font-family: AppleSystemUIFont;
      color: #71737b;
    }
  }
  .album_li_right247 {
    width: 247px;
    padding-bottom: 31px;
    padding-top: 15px;
  }
}
</style>